<!--
 * @Author: jiangyg email@jiangyg.com
 * @Date: 2022-10-28 20:14:30
 * @LastEditors: jiangyg email@jiangyg.com
 * @LastEditTime: 2022-12-06 06:11:52
 * @FilePath: /frontend/mall-frontend/src/views/index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <layout>
    <!-- 顶部搜索栏 -->
    <div class="header">
      <div class="w">
        <search-input />
      </div>
    </div>
    <!-- 首页焦点区域 -->
    <div class="focus">
      <div class="w clearfix">
        <!-- 左侧导航 -->
        <div class="fl category" style="height: 470px">
          <ul>
            <li v-for="(cate1l, l1indx) in category" :key="l1indx">
              <el-popover popper-class="category-popover" placement="right-start" width="880px" trigger="hover">
                <template v-if="cate1l.children && cate1l.children.length > 0">
                  <el-row v-for="(cate2l, l2indx) in cate1l.children" :key="l2indx">
                    <el-col :span="4">
                      <span class="fr">
                        <el-link :underline="false">
                          {{ cate2l.name }}
                          <i class="el-icon-arrow-right"></i>
                        </el-link>
                      </span>
                    </el-col>
                    <el-col :span="20">
                      <el-link
                        v-for="(cate3l, l3indx) in cate2l.children" :key="l3indx"
                        type="info" :underline="false">
                        <router-link
                          target="_blank"
                          :to="{ 'name': 'search', 'query': { 'keyword': cate3l.name, 'cate': cate3l.id } }">
                          {{ cate3l.name }}
                        </router-link>
                      </el-link>
                    </el-col>
                  </el-row>
                </template>
                <template #reference>
                  <span>{{ cate1l.name }}</span>
                </template>
              </el-popover>
            </li>
          </ul>
        </div>
        <!-- 广告轮播 -->
        <div class="fr promotion" style="height: 470px">
          <el-row>
            <el-col class="promotion-left" :span="18">
              <el-carousel height="470px">
                <el-carousel-item v-for="item in promotions.left.data" :key="item">
                  <router-link target="_blank" :to="{}" @click="clickPromotionEvent(item)">
                    <el-image :src="item.pic" :style="promotions.left.style" fit="fill"></el-image>
                  </router-link>
                </el-carousel-item>
              </el-carousel>
            </el-col>
            <el-col class="promotion-right" :span="6">
              <el-carousel height="470px">
                <el-carousel-item v-for="item in promotions.right.data" :key="item">
                  <router-link v-for="childItem in item" :key="childItem" target="_blank" :to="{}"  @click="clickPromotionEvent(childItem)">
                    <el-image :src="childItem.pic" :style="promotions.right.style"></el-image>
                  </router-link>
                </el-carousel-item>
              </el-carousel>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
    <!-- 秒杀区域 -->
    <div class="seckill">
      <div class="seckill_inner w bw clearfix">
        <router-link to="/seckill">
          <div class="fl seckill-countdown">
            <div class="countdown-title">商品秒杀</div>
            <div class="countdown-desc"><strong>10:00</strong>点场 距结束</div>
            <div class="countdown-main">
              <span class="timmer_unit timmer_unit--hour">05</span>
              <span class="timmer_unit timmer_unit--minute">48</span>
              <span class="timmer_unit timmer_unit--second">12</span>
            </div>
          </div>
        </router-link>
        <div class="seckill-list">
          <div class="slider">
            <button class="slider_control slider_control_prev" @click="seckillControlEvent(-1000)">
              <icon-svg name="arrow-left" />
            </button>
            <div class="slider_list">
              <div class="slider_wrapper" :style="seckill.style">
                <div class="fl slider_item" v-for="(sku, idx) in seckill.list" :key="idx">
                  <router-link target="_blank" :to="`/item/${sku.id}`">
                    <el-image :src="sku.url" fit="fill"></el-image>
                    <div class="slider_item_title">
                      <h6 :title="sku.title">{{ sku.title }}</h6>
                    </div>
                    <div class="slider_item_price">
                      <span>
                        <strong>
                          <em>￥</em>
                          <i>{{ sku.price }}</i>
                        </strong>
                      </span>
                    </div>
                  </router-link>
                </div>
              </div>
            </div>
            <button class="slider_control slider_control_next" @click="seckillControlEvent(1000)">
              <icon-svg name="arrow-right" />
            </button>
          </div>
        </div>
      </div>
    </div>
  </layout>
</template>

<script lang="ts" setup>
import http from "@/utils/httpRequest.js";
import { ref, onMounted, reactive } from "vue";
import { RouterLink, useRouter } from "vue-router";

import "@/assets/scss/modules/index.scss";
import SearchInput from "@/views/commons/search-input.vue";
import Layout from "@/views/commons/layout/index.vue";

const router = useRouter();

// 广告轮播数据
const promotions = reactive({
  left: {
    style: {
      width: "100%",
      height: "100%",
    },
    data: [],
  },
  right: {
    style: {
      width: "100%",
      height: "154px",
    },
    data: [],
  },
});

// 分类数据
const category = ref([]);

// 秒杀数据
const seckill = reactive({
  list: [],
  style: {
    opacity: 1,
    width: "3992px",
    transform: "translate3d(0px, 0px, 0px)",
    transition: "none 0s ease 0s",
  },
  width: 3992,
  translate: 0,
});

// 组件挂载完成后执行
onMounted(() => {
  // 1. 加载促销数据
  loadPromotions();

  // 2. 加载分类数据
  loadCategoryTree();

  // 3. 获取秒杀商品列表
  loadSeckillData();
});

// 加载分类数据
const loadCategoryTree = () => {
  http
    .get({
      url: "/product/category/tree",
    })
    .then(({ data }) => {
      if (http.success(data, false)) {
        category.value = data.body;
      }
    });
};

// 加载促销数据
const loadPromotions = () => {
  http
    .get({
      url: "/coupon/home-adv/c-list",
    })
    .then(({ data }) => {
      if (http.success(data, false)) {
        let advList = data.body;
        // 左侧大图广告位
        promotions.left.data = advList.filter(item => item.type === 1);
        // 右侧小图广告位
        let rightAdvList = advList.filter(item => item.type === 2);
        let rightAdvSize = rightAdvList.length;
        if (rightAdvList.length > 0) {
          let sidx = 0;
          let fadvList = [];
          do {
            let eidx = sidx + 3 <= rightAdvSize ? sidx + 3 : rightAdvSize;
            fadvList.push(rightAdvList.slice(sidx, eidx));
            sidx = eidx;
          } while(sidx < rightAdvSize);
          promotions.right.data = fadvList;
        }
      }
    });
};

// 点击广告事件
const clickPromotionEvent = (promotion) => {
  http
    .post({
      url: "/coupon/home-adv/click",
      params: { homeAdvId: promotion.id }
    });
};

// 加载秒杀数据
const loadSeckillData = () => {
  http
    .post({
      url: "/seckill/list",
    })
    .then(({ data }) => {
      if (http.success(data, false)) {
        seckill.list = data.body;
      }
    });
}

// 秒杀后翻页事件
const seckillControlEvent = (w = 998) => {
  if (seckill.translate + w >= 0 || seckill.translate + w <= -seckill.width) {
    seckill.translate = 0;
  } else {
    seckill.translate = seckill.translate + w;
  }
  seckill.style.transition = "transform 500ms ease-in-out 0s";
  seckill.style.transform = `translate3d(${seckill.translate}px, 0px, 0px)`;
};
</script>
